<template>
  <div class="bg hasfooter detail">
    <swiper height="11rem" :list="imgList" dots-position="center"></swiper>
    <div class="info_wrap bgw">
      <div class="title">
        <span class="tag tag_1" v-if="item.hot">火</span><span class="tag tag_2" v-if="item.tuijian">荐</span>{{item.title}}
      </div>
      <div class="handel desc clear">
        <div class="handel_info fl">
          <p><i class="location">&#xe603;</i><span>{{item.address}}</span></p>
          <p><i class="timer">&#xe602;</i><span>{{item.time}}</span>
            <a href="javascript:;" class="addFav" v-if="!item.hasFav" @click="doAddFav"><i class="like">&#xe613;</i>收藏</a>
            <a href="javascript:;" class="addFav active" v-if="item.hasFav"><i class="like">&#xe613;</i>已收藏</a></p>
        </div>
      </div>
      <div class="line"></div>
      <div class="handel clear">
        <div class="handel_info fl">
          <p>＊需满{{item.all}}人开课,现{{item.now}}人报名</p>
          <p>＊该课程会员免费，非会员原价</p>
        </div>
        <button class="btn btn-1 fl btn-yuyue" v-if="!item.hasYuyue" @click="doYuyue"><i></i>预约</button>
        <button class="btn btn-1 fl" v-if="item.hasYuyue">已预约</button>
      </div>
    </div>
    <div class="other_wrap bgw pd">
      <div class="other_title">
        课程详情
      </div>
      <div class="lesson_detail">
        <!-- <p class="teacher">任课老师：{{item.teacher}}</p> -->
        <div id="detail" :style="{height: (heightIndex < (heightMax - 1) && !showAll ? (heightIndex + 1) * 1000 + 'px' : 'auto'), overflow: 'hidden'}">
          {{{item.detail}}}
        </div>
        <div class="copy" style="position: fixed;top:-9999999rem;">
          {{{item.detail}}}
        </div>
        <div class="more btn2" v-if="heightMax > 1 && heightMax > (heightIndex + 1) && !showAll" @click="addPage">点击展开更多</div>
      </div>
    </div>
    <div class="other_wrap bgw pd">
      <div class="other_title">
          相关课程
      </div>
      <div class="lessons">
        <div class="lesson_item clear bgw" v-for="item in relatedList">
          <a v-link="{name: 'lesson',query: {id: item.id}}">
            <div class="imgWrap">
              <img v-lazy="item.imgs[0]">
            </div>
            <div class="lesson_info">
              <p class="title">
                <span class="tag tag_1" v-if="item.hot">火</span><span class="tag tag_2" v-if="item.tuijian">荐</span>{{item.title}}
              </p>
              <p class="desc">
                  <i class="icon_1"></i>{{item.address}}
              </p>
              <p class="desc">
                  <i class="icon_2"></i>{{item.time}}
              </p>
            </div>
          </a>
        </div>
        <div class="more btn2" @click="nextPageRelated" v-if="!relatedIsloading&&relatedList.length>0&&relatedIsmore">点击展开更多</div>
      </div>
    </div>
    <div class="other_wrap evaluation bgw pd">
      <div class="other_title">
        会员评价
      </div>
      <div class="evaluation_list">
        <div class="evaluation_item clear" v-for="item in evaluateList">
          <img :src="item.user.avatar"  class="avatar fl">
          <div class="info fl">
            <div class="author_wrap clear">
              <p class="author">{{item.user.nickName}}</p>
              <score :score-no="item.scoreNo" :disabled="true"></score>
            </div>
            <p class="desc">
              {{item.desc}}
            </p>
            <div class="photos clear">
              <img :src="img.url" v-for="img in item.imgs">
            </div>
            <p class="time">{{item.time | date 'yyyy-MM-dd hh:mm'}}</p>
          </div>
        </div>
        <div class="more btn2" @click="nextPageEvaluate" v-if="!evaluateIsloading&&evaluateList.length>0&&evaluateIsmore">点击展开更多</div>
      </div>
    </div>
    <vfooter></vfooter>
  </div>
</template>
<script type="text/babel">
  import {getDetail, getList, addFav, yuyue} from '../factory/lessons';
  import evaluateService from '../factory/evaluate';
  export default {
    name: 'lesson',
    components: {
      vfooter: require('../components/vfooter'),
      Swiper: require('vux/dist/components/Swiper'),
      SwiperItem: require('vux/dist/components/Swiper-item'),
      score: require('../components/score')
    },
    data () {
      return {
        item: {},
        desc: '',
        imgList: [],
        heightCount: 0,
        heightIndex: 0,
        heightMax: 0,
        relatedList: [],
        relatedPageIndex: 1,
        relatedIsloading: true,
        relatedIsmore: false,
        evaluateList: [],
        evaluatePageIndex: 1,
        evaluateIsloading: true,
        evaluateIsmore: false,
        showAll: false
      };
    },
    created () {
      this.$dispatch('alert.close');
      let that = this;
      getDetail({
        id: that.$route.query.id
      }).then(res => {
        if (!res.iserror) {
          that.item = res.data.lesson;
          that.imgList = that.item.imgs.map(img => {
            let _img = {
              url: 'javascript:',
              img: img
            };
            return _img;
          });
          setTimeout(() => {
            that.heightCount = document.querySelector('.copy').offsetHeight;
            that.heightMax = Math.ceil(that.heightCount / 1000);
          }, 60);
        };
      });

      that.nextPageRelated();

      that.nextPageEvaluate();
    },
    methods: {
      addPage () {
        this.showAll = true;
        // this.heightIndex ++;
      },
      doAddFav () {
        let that = this;
        addFav().then(res => {
          if (!res.iserror) {
            that.item.hasFav = !that.item.hasFav;
            that.$dispatch('alert', '操作成功~');
          }
        });
      },
      doYuyue () {
        let that = this;
        yuyue().then(res => {
          if (!res.iserror) {
            that.item.hasYuyue = !that.item.hasYuyue;
            that.$dispatch('alert', '操作成功~');
          }
        });
      },
      nextPageRelated () {
        let that = this;
        let postParams = {page: this.relatedPageIndex++, size: 5};
        Object.assign(postParams, {id: that.$route.query.id});
        that.relatedIsloading = true;
        getList(postParams).then(function (res) {
          if (!res.iserror) {
            that.relatedList = that.relatedList.concat(res.data.list);
            that.relatedIsmore = true;
            if (res.data.count <= that.relatedList.length) {
              that.relatedIsmore = false;
            }
          }
          that.relatedIsloading = false;
        });
      },
      nextPageEvaluate () {
        let that = this;
        let postParams = {page: this.evaluatePageIndex++, size: 5};
        Object.assign(postParams, {id: that.$route.query.id});
        that.evaluateIsloading = true;
        evaluateService.getList(postParams).then(function (res) {
          if (!res.iserror) {
            that.evaluateList = that.evaluateList.concat(res.data.list);
            that.evaluateIsmore = true;
            if (res.data.count <= that.evaluateList.length) {
              that.evaluateIsmore = false;
            }
          }
          that.evaluateIsloading = false;
        });
      }
    }
  };
</script>
